<!-- 招聘信息列表页 -->
<template>
        <main>
            <job-list-header></job-list-header>
            <job-list-filter :searchParam="searchParam"></job-list-filter>
            <job-list></job-list>
        </main>
</template>

<script>
import {
    getJobListInfo,
    getCityList
} from './model/result.model';
import JobListHeader from './components/header';
import JobListFilter from './components/filter';
import JobList from './components/list';
import store from '@/store';

export default {
    data() {
        return {
            token: '',
            searchParam: {
                queryParam: {
                    keyword: '', // 搜索关键字,未输入则为空
                    cityId: ''
                },
                sortParam: {
                    location: '',
                    settlement: '',
                    salary: '',
                },
                pageParam: {
                    page: 1,
                    pageSize: 15,
                },
            },
        };
    },
    components: {
        JobListHeader,
        JobListFilter,
        JobList
    },
    onLoad() {
        if(!this.$store.state.userInfo.userId) {
            wx.redirectTo({
                url: '/pages/start/main'
            })
        }
    },
    
    watch: {
        searchParam: {
            handler() {
                this.search();
            },
            deep: true,
        },
        '$store.state.currentCity'() {
            this.searchParam.queryParam.cityId = this.$store.state.currentCity.cityId;
        },
    },
    methods: {
        search() {
            if(this.searchParam.queryParam.cityId !== this.$store.state.currentCity.cityId) {
                 this.searchParam.queryParam.cityId = this.$store.state.currentCity.cityId;
            } else {
                getJobListInfo({
                    ...this.searchParam,
                }).then(()=>{
                    wx.hideNavigationBarLoading(); // 隐藏导航栏加载框
                    wx.stopPullDownRefresh(); // 停止下拉动作
                });
            }
        },
    },

    onPullDownRefresh() {
        wx.showNavigationBarLoading(); // 显示顶部刷新图标
        if(this.searchParam.pageParam.page === 1) {
            this.search()
        } else {
            this.searchParam.pageParam.page = 1;
        }
    },
    onShareAppMessage(response) { 
    },
    onReachBottom() { // 加载更多
        this.searchParam.pageParam.page = this.searchParam.pageParam.page + 1;
    }
};

</script>
<style lang='less' scoped>
main {
    a {
        color: #2c3e50;
    }
    .search-wrap {
        height: 50px;
        .search-input {
            width: 65%;
        }
        .search-submit {
            vertical-align: middle;
        }
    }
    section {
        margin-top: 10px;
        border-radius: 8px;
        border: 1px solid #ebeef5;
        background-color: #fff;
        overflow: hidden;
        text-align: center;
    }

    .cards {
        .card-item {
            padding: 10px;
            border-top: 1px solid #ebeef5;
            cursor: pointer;
            .flex-wrapper {
                .left-img {
                    width: 120px;
                    height: 120px;
                }
                img {
                    width: 120px;
                    height: 120px;
                    border-radius: 8px;
                    border: 1px solid #ebeef5;
                }
                .center-company {
                    padding: 0 10px;
                    max-width: 50%;
                    overflow: hidden;
                    .company-name {
                        width: 100%;
                        word-break: break-all;
                        font-size: 16px;
                        font-weight: 500;
                        text-align: left;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;

                    }
                    .location {
                        width: 100%;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        .location-icon {
                            float: left;
                            vertical-align: middle;
                        }
                        .location-text {
                            float: left;
                            vertical-align: bottom;
                        }
                    }
                    .tags {
                        .tag {
                            margin-left: 3px;
                            margin-right: 3px;
                        }
                    }
                    .date {
                        color: #b3bdd4;
                    }
                }
                .right-info {
                    .price {
                        overflow: hidden;
                        font-size: 18px;
                        color: #f96969;
                    }
                }
            }
        }
    }

    .fixed-icon {
        position: fixed;
        z-index: 999;
        right: 15px;
        bottom: 10px;
        display: flex;
        flex-direction: column;
        .border-icon {
            margin-bottom: 10px;
            opacity: 0.8;
        }
    }
}
</style>
